<!-- 沟通备注 -->
<template>
    <view :style="{'--total-height': totalHeight + 'px'}">
        <status-bar title='沟通备注' :goHome='fromShare'></status-bar>
        <view class="p-left30 p-right30 p-top40 p-bot10 d-flex j-sb a-center">
            <view class="text-center m-right24" @click="handleRecord">
                <text class="iconfont icon-zengjia size36" style="color: #2F7EFF;"></text>
                <view class="size22 color_99 m-top4">添加记录</view>
            </view>
            <u-input v-model="search" placeholder="输入关键词搜索" shape="circle" prefixIcon="search" prefixIconStyle="font-size:20px; color:#C8C8C8" fontSize="12" color="#C8C8C8"
                @blur="handleBlur">
                <template slot="suffix">
                    <u-icon name="close-circle-fill" color="#C8C8C8" size="20" @click="handleClear" v-if="search"></u-icon>
                </template>
            </u-input>
            <view class="text-center m-left24" @click="handleOpen">
                <text class="iconfont icon-qiandao size36" style="color: #2EDEA2;"></text>
                <view class="size22 color_99 m-top4">日期选择</view>
            </view>
        </view>
        <scroll-view class="main" scroll-y :scroll-into-view="toView" @scroll="toView = ''" v-if="list.length">
            <view class="item padding30" v-for="(item,index) in list" :key="index" :id="`record${item.id}`">
                <view class="m-bot20">
                    <text class="size28 color_22 bold m-right40">{{ item.add_time }}</text>
                    <text class="iconfont icon-zu size30 color_66 bold" @click="handleQuote(item)"></text>
                </view>
                <!-- 关联记录 -->
                <view class="extra m-bot30" v-if="item.quote" @click="goPrev(item.quote.id)">
                    <view class="size22 m-bot10">{{ item.quote.add_time }}</view>
                    <view class="size22">
                        <rich-text :nodes="highlight(item.quote.msg)"></rich-text>
                    </view>
                    <view v-if="item.quote.img">
                        <image class="img m-right10 m-top10" :src="$imgUrls(url)" mode="aspectFill" v-for="(url,idx) in item.quote.img" :key="idx"
                            @click.stop="previewImg(item.quote.img, idx)"></image>
                    </view>
                </view>
                <view class="size30 color_22" @click="goBack(item.id)">
                    <rich-text :nodes="highlight(item.msg)"></rich-text>
                </view>
                <view v-if="item.img">
                    <image class="thumb m-right20 m-top20" :src="$imgUrls(url)" mode="aspectFill" v-for="(url,idx) in item.img" :key="idx"
                        @click="previewImg(item.img, idx)"></image>
                </view>
            </view>
        </scroll-view>
        <empty v-else cat='3' msg='您还没有相关的记录'></empty>
        <!-- 添加记录弹窗 -->
        <u-popup :show="showPopup" :round="10" @close="showPopup = false">
            <view class="d-flex f-column j-sb">
                <view class="padding50-30 flex-1">
                    <view class="m-bot20 ellipsis" style="color: #455374" v-if="prevMsg">
                        <text class="iconfont icon-yinyong size36 m-right4"></text>
                        <text>{{ prevMsg }}</text>
                    </view>
                    <u--textarea v-model="msg" placeholder="请输入内容" height="200" maxlength="-1"></u--textarea>
                    <view class="m-top50">
                        <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple></u-upload>
                    </view>
                </view>
                <view class="d-flex">
                    <view class="btn text-center size28" @click="showPopup = false">取消</view>
                    <view class="btn text-center size28 white" @click="handleAdd">记录</view>
                </view>
            </view>
        </u-popup>
        <!-- 日历 -->
        <uni-calendar ref="calendar" :insert="false" :endDate="endDate" :clearDate="false" @confirm="confirm" />
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            search: '',
            showPopup: false,
            msg: '',
            fileList: [],
            list: [],
            pid: '', // 上级记录id
            guest_id: '',
            toView: '', // 滚动到某元素的id
            prevMsg: ''
        }
    },
    computed:{
	    ...mapState(['bid','totalHeight']),
        endDate(){
            return this.getDate()
        }
    },
    onLoad(e){
        if(e.guest_id) this.guest_id = e.guest_id
        this.getRemarks()
    },
    methods: {
        getRemarks(id){
            this.$http.get({
                url: '/PrivateSphereApi/getCommunicate',
                data: {
                    search: this.search,
                    guest_id: this.guest_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                if(id) this.toView = `record${id}`
                this.list = res.data || []
            })
        },
        handleBlur(){
            console.log('失去焦点', this.search)
            this.getRemarks()
        },   
        handleClear(){
            this.search = ''
            this.getRemarks()
        },
        async afterRead(e){
            let lists = [].concat(e.file)
            let fileListLen = this.fileList.length
            lists.map(item=>{ // 临时显示
                this.fileList.push({...item, status: 'uploading', message: '上传中'})
            })
            for(let i = 0; i < lists.length; i++){
                const res = await this.$common.uploadFile('/zzjApp/uploade?bid=' + this.bid, lists[i].url) // 调接口
                if(res.errcode != 100) return this.$Toast('上传失败')
                let item = this.fileList[fileListLen]
                let url = this.$imgUrls(res.url.substring(23)) // 截取掉'/data/sswl/public_html/'
                this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success', message: '', url}))
                fileListLen++
            }
        },
        deletePic(e){
            this.fileList.splice(e.index, 1)
        },
        getDate(){ // 获取当前日期
            const date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            month = month > 9 ? month : '0' + month
            day = day > 9 ? day : '0' + day
            return `${year}-${month}-${day}`
        },
        handleOpen(){
            this.$refs.calendar.open()
        },
        confirm(e){ // 滚动到对应日期记录而非筛选
            console.log(e)
            this.$http.get({
                url: '/PrivateSphereApi/getCommunicate',
                data: {
                    search: this.search,
                    add_time: e.fulldate,
                    guest_id: this.guest_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                if(res.data && res.data.length){
                    this.toView = `record${res.data[0].id}`
                }
            })
        },
        handleQuote({id, msg}){
            this.pid = id
            this.prevMsg = msg
            this.showPopup = true
        },
        handleRecord(){
            this.pid = ''
            this.prevMsg = ''
            this.showPopup = true
        },
        handleAdd(){ // 添加记录
            if(!this.msg) return this.$Toast('请输入内容')
            this.$http.post({
                url: '/PrivateSphereApi/addCommunicate',
                data: {
                    msg: this.msg,
                    img: this.fileList.map(item=>item.url).toString(),
                    pid: this.pid,
                    guest_id: this.guest_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.showPopup = false
                this.getRemarks()
                this.fileList = []
                this.msg = ''
            })
        },
        previewImg(urls, idx){ // 预览图片
            uni.previewImage({
                current: idx,
                urls: urls.map(item=>this.$imgUrls(item)),
                indicator: 'number'
            })
        },
        handleDel({id}){
            this.$Modal('提示', '确定删除该条记录吗？').then(res=>{
                if(!res) return
                this.$http.post({
                    url: '/PrivateSphereApi/delCommunicate',
                    data: {
                        id
                    }
                }).then(res=>{
                    if(res.code != 200) return this.$Toast(res.msg)
                    this.getRemarks()
                })
            })
        },
        goPrev(id){
            if(this.search){
                this.search = ''
                this.getRemarks(id)
            } else{
                this.toView = `record${id}`
            }
        },
        goBack(id){
            if(this.search){
                this.search = ''
                this.getRemarks(id)
            }
        },
        highlight(val){
            let reg = new RegExp(`(${this.search})`, 'gm')
            let replace = '<span style="color: #f73131;">$1</span>'
            return val.replace(reg, replace)
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    height: calc(100vh - var(--total-height) - 72px);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}
.item {
    border-bottom: 1rpx solid #D9D9D9;
    .extra {
        background: #F1F6FF;
        border-radius: 2rpx;
        padding: 18rpx;
        color: #455374;
        .img {
            width: 112rpx;
            height: 96rpx;
        }
    }
    .thumb {
        width: 210rpx;
        height: 180rpx;
        &:nth-child(3n){
            margin-right: 0;
        }
    }
}
.btn {
    width: 50%;
    line-height: 90rpx;
    &:first-child {    
        background: #D9EDFF;       
        border-radius: 26rpx 0rpx 0rpx 0rpx;
        color: #709BC3;
    }
    &:last-child { 
        background: #3690FF;
        border-radius: 0rpx 26rpx 0rpx 0rpx;
    }
}
</style>